<template>
  	<page-meta :root-font-size="fontSizeStore.currentFontSizeRpx"></page-meta>
  <view class="page-container">
    


        <!-- 第三行及以下：订单列表 -->
    <view class="order-list">
      <!-- 订单卡片项 -->
       <orderItems :orderList="orderList" type="read"/>
      
    </view>

  </view>

</template>

<script setup>
// 静态组件，无额外逻辑
	import gridMenu from "@/components/grid-menu/index" 
  import orderItems from "@/components/orderItems/index"

import {
  ref,
  onMounted,
  computed,
  nextTick
} from 'vue';
import {
  useRouter
} from 'uni-mini-router'

import {
  useFontSizeStore
} from '@/stores/fontSizeStore';
import {
  useTabStore
} from '@/stores/tabs'
import {
  ROLE_TABS
} from "@/config/roles"
import TabComponent from '@/components/tab-bar/index.vue'
import { familyItemsApi } from "@/api/familyMembers"
const fontSizeStore = useFontSizeStore();
const tabStore = useTabStore()
const router = useRouter();

// ✅ 计算当前角色的 tabs
const currentTabs = computed(() => {
  const role = tabStore.getUserRole
  return ROLE_TABS[role]?.tabs || ROLE_TABS['default']?.tabs || []
})

// ✅ Tab 点击处理
const onTabChange = (tab) => {
  nextTick(() => {
    router.pushTab({
      name: tab.key
    })
  })
}

 
// 菜单数据
 

// mock 数据：包含“长辈工单”和“自己工单”
const orderList = ref([]);

onMounted(() => {
  familyItemsApi({
    id: ""
  }).then((res) => {
    orderList.value = res.data;
  })
})

const navigationUrl=(item)=>{

  router.push({
    name:item.name,
    params:item.params
  })
}

// 根据状态获取样式类名
const getStatusClass = (status) => {
  const classMap = {
    pending: 'status-pending',
    confirmed: 'status-confirmed',
    processing: 'status-processing',
    completed: 'status-completed'
  };
  return classMap[status] || '';
};

</script>

<style lang="less" scoped>
@import '@/static/styles/volunteer/home/index.less';

// 订单列表样式
  .order-list {
    padding: 30rpx;
    display: flex;
    flex-direction: column;

    .row-title{
      display: flex;
      justify-content: start;
      margin-bottom: 30rpx;
      .title-text{
        font-weight: 500;
      }
    }

    // 订单卡片
    .order-card {
      background-color: #fff;
      border-radius: 16rpx;
      padding: 20rpx;
      border: 1rpx solid #efefef;
      margin-bottom: 20rpx;

      // 订单行通用样式
      .order-row {
        display: flex;
        width: 100%;
        margin-bottom: 16rpx;
        align-items: center;

        &:last-child {
          margin-bottom: 0;
        }

        // 第一行：订单号和订单状态
        &.row1 {
          justify-content: space-between;
          padding-bottom: 16rpx;
          border-bottom: 1px solid #f5f5f5;

          .order-no {
            font-size: 26rpx;
            color: #333;
            // font-weight: 500;
          }
        }

        // 第二行：图片、服务信息和金额
        &.row2 {
          align-items: center;
          gap: 16rpx;
          padding: 10rpx 0;

          .product-image {
            width: 100rpx;
            height: 100rpx;
            border-radius: 8rpx;
            overflow: hidden;
            background-color: #f5f5f5;
            flex-shrink: 0;

            image {
              width: 100%;
              height: 100%;
            }
          }

          .product-info {
            flex: 1;
            min-width: 0;

            .service-name {
              font-size: 26rpx;
              color: #333;
              font-weight: 500;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
              margin-bottom: 6rpx;
            }

            .product-model {
              font-size: 22rpx;
              color: #666;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
            }
          }

          .order-amount {
            flex-shrink: 0;
            text-align: right;
            min-width: 120rpx;

            .amount-label {
              font-size: 22rpx;
              color: #666;
              display: block;
            }

            .amount-value {
              font-size: 26rpx;
              color: #f5222d;
              font-weight: 600;
            }
          }
        }

        // 第三行：支付状态、订单时间和详情按钮
        &.row3 {
          justify-content: space-between;
          padding-top: 16rpx;
          border-top: 1px solid #f5f5f5;

          .order-time {
            font-size: 22rpx;
            color: #666;
            margin: 0 10rpx;
            flex: 1;
            text-align: left;
          }

          .detail-btn {
            background-color: #1890ff;
            color: white;
            border: none;
            border-radius: 8rpx;
            padding: 8rpx 20rpx;
            font-size: 24rpx;
            height: auto;
            line-height: 1;
            white-space: nowrap;
          }
        }
      }
    }

    // 空状态样式
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 150rpx 0;

      .empty-icon {
        font-size: 80rpx;
        margin-bottom: 30rpx;
        color: #ddd;
      }

      .empty-text {
        font-size: 28rpx;
        color: #999;
      }
    }

    // 加载状态样式
    .loading-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 150rpx 0;

      .spinner {
        width: 50rpx;
        height: 50rpx;
        border: 5rpx solid #eee;
        border-top-color: #1890ff;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 20rpx;
      }

      text {
        font-size: 28rpx;
        color: #666;
      }
    }
  }
</style>